import React from "react";
import { List } from "antd";
import {
  CheckOutlined, CloseCircleOutlined
} from '@ant-design/icons';
import { STATUS } from './../../config/status'
const ToDoContainer = (props) => {
  const { todos = [], onOperate, filterStatus } = props
  // 勾选或删除
  const handleOperate = (operate, item) => {
    console.log('operate,item', operate, item);
    switch (operate) {
      case 'is-delete':
        // 触发父组件方法
        onOperate && onOperate({
          ...item,
          status: STATUS.IS_DELETE
        })
        break;
      case 'is-done':
        onOperate && onOperate({
          ...item,
          status: item.status === STATUS.IS_DONE ? STATUS.IS_CREATE : STATUS.IS_DONE//如果是已完成再点击就是初始状态
        })
        break;
      default:
        break;
    }
  }
  const showTodos = todos.filter(todo => {
    // 触发过滤筛选的方法;让单选选择出来的数据和content的保持一致
    return todo.status !== STATUS.IS_DELETE && filterStatus.indexOf(todo.status.toString()) > -1
  })
  return (
    <div className="todo-container">
      <List
        dataSource={showTodos}
        renderItem={todo => (
          <List.Item className={todo.status === STATUS.IS_DONE ? 'todo-container-list-done' : "todo-container-list"}>
            {todo.content}
            <div className="todo-item-operate">
              <CloseCircleOutlined onClick={() => { handleOperate('is-delete', todo) }} />
              <CheckOutlined onClick={() => { handleOperate('is-done', todo) }} />
            </div>
          </List.Item>
        )
        }
      />
    </div>
  )
}
export default ToDoContainer